<template>
	<div class="wxxpg">
		<!-- 风险评估 -->
		<div class="fxpg">
			<div class="title">
				<h4><img style="height: 30px;vertical-align: middle;margin-top: -2px;"
						src="@/assets/images/panel/trangle.png" alt="" />风险评估</h4>
			</div>
			<!-- 气象灾害普查 -->
			<div class="qxzhpc">
				<div class="header">
					<label>
						<input type="radio" />
						气象灾害普查
					</label>
				</div>
				<div class="main">
					<div class="t-part">
						<i class="el-icon-caret-right"></i>
						危险性等级区划
					</div>
					<ul>
						<li v-for="(item,index) in ['暴雨','大风','暴雪','高温','冰雹']" :key='index' ><label><input type="radio"
									name='1' v-model="radioValue1" :value="item"/>{{item}}</label></li>
					</ul>
					<div class="t-part">
						<i class="el-icon-caret-right"></i>
						人口风险等级区划
					</div>
					<ul>
						<li v-for="(item,index) in ['暴雨','大风','暴雪','高温','冰雹']" :key='index'><label><input type="radio"
									name='2' v-model="radioValue2" :value="item"/>{{item}}</label></li>
					</ul>
					<div class="t-part">
						<i class="el-icon-caret-right"></i>
						GDP风险等级区划
					</div>
					<ul>
						<li v-for="(item,index) in ['暴雨','大风','暴雪','高温','冰雹']" :key='index'><label><input type="radio"
									name='3' v-model="radioValue3" :value="item"/>{{item}}</label></li>
					</ul>
					<div class="t-part">
						<i class="el-icon-caret-right"></i>
						小麦风险等级区划
					</div>
					<ul>
						<li v-for="(item,index) in ['暴雨','大风','暴雪','高温','冰雹']" :key='index'><label><input type="radio"
									name='4' v-model="radioValue4" :value="item"/>{{item}}</label></li>
					</ul>
					<div class="t-part">
						<i class="el-icon-caret-right"></i>
						玉米风险等级区划
					</div>
					<ul>
						<li v-for="(item,index) in ['暴雨','大风','高温','冰雹']" :key='index'><label><input type="radio"
									name='5' v-model="radioValue5" :value="item"/>{{item}}</label></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: "wxxpg-page",
		data() {
			return {
				radioValue1: '',
				radioValue2: '',
				radioValue3: '',
				radioValue4: '',
				radioValue5: ''
			}
		},
		mounted() {
			this.panelInit()
		},
		methods: {
			//切换折叠面板
			panelInit() {
				let titleBtn = document.querySelectorAll('.t-part')
				let openPart = document.querySelectorAll('.main ul')
				for (let i = 0; i < titleBtn.length; i++) {
					titleBtn[i].onclick = function() {
						var panel = this.nextElementSibling;
						if (panel.style.maxHeight) {
							panel.style.maxHeight = null;
							this.querySelector('i').classList.add('el-icon-caret-right')
							this.querySelector('i').classList.remove('el-icon-caret-bottom')
						} else {
							panel.style.maxHeight = panel.scrollHeight + "px";
							this.querySelector('i').classList.remove('el-icon-caret-right')
							this.querySelector('i').classList.add('el-icon-caret-bottom')
						}
					}
				}
			}
		}
	}
</script>
<style lang='scss' scoped>
	* {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.wxxpg {
		.fxpg {
			position: absolute;
			right: 20px;
			width: 440px;
			background-color: rgba(8, 46, 82, 0.8);
			height: 87vh;
			top: -20px;
			z-index: 1;
			.title {
				height: 30px;
				line-height: 30px;
				border: 0;
				border-bottom: 1px solid rgba(255, 255, 255, 0.5);
				background-image: url("../../assets/images/panel/panel-bottom-left.png");
				background-repeat: no-repeat;
				background-size: 100%;
				color: #fff;
				h4 {
					font-size: 15px;
				}
			}
			.qxzhpc {
				padding: 15px;
				.header {
					height: 40px;
					line-height: 40px;
					color: #fff;
					border-bottom: 2px solid #6dace3;
					input {
						margin-right: 5px;
					}
				}
				.main {
					.t-part {
						color: #fff;
						font-size: 14px;
						height: 40px;
						line-height: 40px;
					}
					ul {
						display: flex;
						color: #fff;
						width: 100%;
						padding-left: 20px;
						padding: 0 18px;
						max-height: 0;
						overflow: hidden;
						transition: max-height 0.2s ease-out;
						li {
							margin-right: 20px;
							input {
								margin-right: 5px;
							}
						}
					}
				}
			}
		}
	}
</style>